<!DOCTYPE html>
<html>
<head>
<!-- [START imports] -->
<script
  src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
  href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
  href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
  href="../../components/core-icons/core-icons.html">
<link rel="import"
  href="../../components/paper-icon-button/paper-icon-button.html">
<!-- [END imports] -->
<style>
/* [START styles] */
body {
  font-family: sans-serif;
}
core-header-panel {
  background: white;
}
core-toolbar {
  background-color: #03A9F4;
}
p {
  margin: 20px;
  padding: 80px 20px;
  border-radius: 20px;
  background-color: #eee;
}
/* [END styles] */
</style>
</head>
<!-- [START html] -->
<!-- use fullbleed attribute to specify
     the body should fill the viewport -->
<body fullbleed vertical layout unresolved>
<!-- [START runnable] -->
  <core-header-panel flex>
    <core-toolbar id="mainheader">
      <paper-icon-button id="navicon"
        icon="arrow-back"></paper-icon-button>
      <span flex>Title</span>
      <paper-icon-button id="searchbutton"
        icon="search"></paper-icon-button>
    </core-toolbar>
    <p>Sample content.</p>
    <p>Sample content.</p>
  </core-header-panel>
</body>
<!-- [END html] -->
</html>
